<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="btn">打印</button>
    <button id="btn1">取消</button>
</body>
<script src="./js/underscore-min.js"></script>
<script>
    var btn = document.getElementById('btn');
    var btn1 = document.getElementById('btn1');
    let a = throttle(function (e) {
        console.log(e, this)
    }, 2000, {
        leading: true,
        trailing: true
    })
    btn.onclick = a
    btn1.onclick = a.cancel
    //1.  顾头不顾尾   leading:true, trailing:false
    //    function throttle(callback,wait){
    //         let old = 0;
    //         return function(...args){
    //            let now = Date.now();
    //            if(now-old>wait){
    //                old = now ;
    //                callback.apply(this,args);
    //            }
    //         }
    //     }
    //2.顾尾不顾头   leading:false, trailing:true
    // function throttle(callback,wait){
    //     let timer=null;
    //     return function(...args){
    //          if(!timer){
    //             timer = setTimeout(() => {
    //                 timer = null;
    //                  callback.apply(this,args);
    //              }, wait);
    //          }
    //     }
    // }

    // 3.顾头顾尾     leading:true, trailing:true
    // function throttle(callback, wait) {
    //     let old = null,
    //         timer;
    //     return function (...args) {
    //         let now = Date.now();
    //         if (now - old > wait) {
    //             callback.apply(this, args);
    //             old = now;
    //             if(timer){
    //                 clearTimeout(timer);
    //                 timer = null;
    //             }
    //         } else if (!timer) {
    //             timer = setTimeout(() => {
    //                 old = Date.now();
    //                 callback.apply(this, args);
    //                 timer = null;
    //             }, wait);
    //         }
    //     }
    // }
    // 4.最终形态
    function throttle(callback, wait, options = {
        leading: true, //第一次是否执行
        trailing: true //最后一次是否执行
    }) {
        let timer = null,
            old = 0,
            result;
        let {
            leading,
            trailing
        } = options;
        let throttled = function (...args) {
            let now = Date.now();
            if (!leading && !old) {
                //将old重新赋值这样就不会进入下面的if中
                old = now;
            }
            // 判断第一次是否立即执行
            if (now - old > wait) {
                console.log('leading')
                result = callback.apply(this, args);
                old = now;
                // 这个if执行时下面的定时器不应该执行
                if (timer) {
                    clearTimeout(timer);
                    timer = null;
                }
                //判断最后一次是否执行
            }else if (!timer && trailing) {
                timer = setTimeout(() => {
                    old = leading ? Date.now() : 0; // leading为false时不应该进入上面的函数
                    callback.apply(this, args);
                    timer = null;  
                }, wait);
            }

            return result;
        }
        // 取消这个请求
        throttled.cancel = function () {
            clearTimeout(timer);
            timer = null;
            old = 0;
        }
        return throttled;
    }
</script>

</html>